<template>
  <div class="team-member-wrap">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="团队成员" name="team">
        <div class="top-btn-wrap">
          <el-button icon="el-icon-plus" @click="addTaemMember()"
            >添加团队成员</el-button
          >
          <el-button @click="edit">编辑</el-button>
          <el-button @click="edit">删除</el-button>
          <el-button @click="exitTeam()" type="danger">退出团队</el-button>
        </div>

        <div class="listTable">
          <el-table
            :data="tableData"
            stripe
            @selection-change="selectionChange"
          >
            <el-table-column
              :selectable="selectableFun"
              show-overflow-tooltip
              type="selection"
              align="center"
              width="55"
            />
            <el-table-column
              v-for="(item, index) in headList"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :min-width="item.width"
              :formatter="formatter"
              show-overflow-tooltip
            />
            <el-table-column
              prop="power"
              label="权限"
              min-width="100"
              show-overflow-tooltip
            >
              <template slot-scope="{ row, column }">
                {{ formatter(row, column)
                }}<el-tooltip
                  v-if="row.power === 1 || row.power === 2"
                  :content="getPowerTip(row.power)"
                  style="margin-left: 3px"
                  effect="dark"
                  placement="top"
                >
                  <i class="rp rp-help rp-help-tips" />
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="交叉销售产品" name="product">
        <div class="top-btn-wrap">
          <el-button icon="el-icon-plus" @click="addSalesProduct()"
            >添加交叉销售团队成员</el-button
          >
        </div>

        <div class="listTable">
          <el-table
            :data="salesList"
            stripe
            @selection-change="selectionChange"
          >
            <el-table-column
              :selectable="selectableFun"
              show-overflow-tooltip
              type="selection"
              align="center"
              width="55"
            />
            <el-table-column
              v-for="(item, index) in headSalesList"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :min-width="item.width"
              :formatter="formatter"
              show-overflow-tooltip
            />
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>

    <addTaemMember ref="addTaemMember" />
    <addSalesProduct ref="addSalesProduct" />
  </div>
</template>
<script>
import addTaemMember from "./addTaemMember.vue";
import addSalesProduct from "./addSalesProduct.vue";

export default {
  components: { addTaemMember,addSalesProduct, },
  data() {
    return {
      activeTab: "team",
      headList: [
        { prop: "realname", width: "120", label: "姓名" },
        { prop: "deptName", width: "100", label: "部门" },
        { prop: "groupRole", width: "100", label: "团队角色" },
        { prop: "expiresTime", width: "120", label: "有效时间" },
      ],
      headSalesList: [
        { prop: "realname", width: "120", label: "产品名称" },
        { prop: "deptName", width: "100", label: "产品类型" },
        { prop: "groupRole", width: "100", label: "价格(元)" },
        { prop: "expiresTime", width: "120", label: "分成人员" },
        { prop: "expiresTime", width: "120", label: "分成依据类型" },
        { prop: "expiresTime", width: "120", label: "分成比例" },
      ],
      selectionList: [],
      tableData: [
        {
          userId: "1666713255980478464",
          realname: "admin",
          deptName: "admin",
          power: 3,
          expiresTime: null,
          products: null,
        },
      ],
      salesList: [],
    };
  },
  methods: {
    addTaemMember() {
        this.$refs.addTaemMember.show()
    },
    addSalesProduct(){
        this.$refs.addSalesProduct.show()
    },
    exitTeam() {
      this.$confirm("确定退出团队??", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //   this.$message({
          //     type: 'success',
          //     message: '删除成功!'
          //   });
        })
        .catch(() => {
          //   this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          //   });
        });
    },
    edit() {
      this.$message.error("请勾选需要操作的团队成员");
    },
    handleClick() {},
    selectableFun(row, index) {
      if (row.power == "负责人权限" || row.power == 3) {
        return false;
      }
      return true;
    },
    selectionChange(val) {
      this.selectionList = val;
    },
    formatter(row, column, cellValue) {
      // 1 只读 2 读写 3 负责人
      if (column.property === "power") {
        return {
          1: "只读",
          2: "读写",
          3: "负责人",
        }[row[column.property]];
      } else if (column.property === "groupRole") {
        return row.power === 3 ? "负责人" : "普通员工";
      } else if (column.property === "expiresTime") {
        return row.expiresTime || "不限";
      }

      return row[column.property] === "" || row[column.property] === null
        ? "--"
        : row[column.property];
    },
    getPowerTip(power) {
      return {
        1: "支持查看详细资料、添加和查看活动中所有跟进记录",
        2: "支持编辑和查看详细资料、可以添加和查看活动中所有跟进记录",
      }[power];
    },
  },
};
</script>
<style lang="scss" scoped>
.team-member-wrap {
  .top-btn-wrap {
    text-align: right;
    margin-bottom: 16px;
  }
}
</style>